<template>
	<view class="home">
		<TnNavbar 
			fixed 
			bg-color="transparent" 
			text-color="#FFFFFF"  
			home-icon="" back-icon=""
			:safe-area-inset-right="false"
			> 
			鸡汤咯~ 
		</TnNavbar>
		
		<view class="home_title">
			<view class="home_Htitle">笑对人生，</view>
			<view class="home_Btitle">毒鸡汤&心灵鸡汤，你选哪一碗？</view>
		</view>
		<view class="home_content">
			<swiper class="card-swiper" :circular="true" previous-margin="80rpx" next-margin="80rpx" @change="cardSwiper" >
				<swiper-item v-for="(item,index) in swiperData" :key="item._id" :class="currentSwiperIndex == index?'cur':''">
					<view class="swiper-item">
						<view class="swiper_item_type" :class="item.soup_type==0?'':'active_type'">
								<TnIcon :name="item.soup_type==0?'skull':'pacman'" type="primary" color="#ffffff" size="30rpx" />
								{{item.soup_type==0?'毒鸡汤':'心灵鸡汤'}}
						</view>
						<view class="cover">
							<image :src="item.cover" mode="aspectFill"></image>
						</view>
						<view class="swiper_item_content">
							<view class="content_sn text_hidden">
								{{item.content}}
							</view>
							<view class="abstract">
								--{{item.from}}
							</view>
						</view>
					</view>
				</swiper-item>
				
			</swiper>	
		</view>
		
	</view>
</template>

<script setup>
	import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
	import {mutations} from '@/uni_modules/uni-id-pages/common/store.js'
	import { ref } from 'vue';
	import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	const db = uniCloud.database()
	const Theight = ref(0)
	const top = ref(0)
	onLoad(()=>{
		let menuButton  = uni.getMenuButtonBoundingClientRect()
		Theight.value = menuButton.top  + menuButton.height 
		top.value = menuButton.top  
	})
	const currentSwiperIndex = ref(0)
	// mutations.logout()
	// 轮播图数据
	// const swiperData = ref([
	 
	// ])
	const swiperData = ref([
	  {id:0,content:'世界灿烂盛大，欢迎回家。',soup_type:0,from:'木子条',cover:'https://resource.tuniaokj.com/images/xiongjie/x14.jpg'},
	  {id:1,content:'世界灿烂盛大，欢迎回家。',soup_type:1,from:'木子条',cover:'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg'},
	  {id:2,content:'世界灿烂盛大，欢迎回家。',soup_type:0,from:'木子条',cover:'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg'},
	  {id:3,content:'世界灿烂盛大，欢迎回家。',soup_type:1,from:'木子条',cover:'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new1.png'},
	  {id:4,content:'世界灿烂盛大，欢迎回家。',soup_type:0,from:'木子条',cover:'https://resource.tuniaokj.com/images/xiongjie/xiong-3d.jpg'},
	])
	const cardSwiper = (e) => {
	  currentSwiperIndex.value = e.detail.current*1
	  console.log( e.detail.current);
	}
	
	const getArr = () => {
		const boiking = db.collection("boiking").getTemp()
		const users = db.collection("uni-id-users").field("_id,nickname,username,avatar_file").getTemp()
		 db.collection(boiking,users).get().then(({result:{code,data}}) => {
			 if(code == 0 ) {
			  		swiperData.value = data
			  	}
		 })
		// db.collection("boiking").get().then(({result:{code,data}}) => {
		// 	console.log(data);
		// 	if(code == 0 ) {
		// 		swiperData.value = data
		// 	}
		// })
	}
	getArr()
</script>

<style lang="scss" scoped>
	
.home {
	position: relative;
	width: 750rpx;
	
	
	.home_title {
		margin-top: 68rpx;
		font-size: 56rpx;
		color: #FFFFFF;
		font-family: MiSans,MiSans;
		padding: 0 40rpx;
		margin-bottom: 60rpx;
		background-image:-webkit-linear-gradient(0deg,#3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
		// background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
		    -webkit-background-clip:text; 
		    -webkit-text-fill-color:transparent;
		.home_Btitle {
			
		}
	}
	.home_content {
		width: 750rpx;
		swiper {
			width: 100%;
			height: 100%;
			
			.swiper-item {
				position: relative;
				.active_type {
					background-image:linear-gradient(-60deg,#16a085 0%, #f4d03f 100%) !important;
				}
				.swiper_item_type {
					position: absolute;
					top: 30rpx;
					left: 30rpx;
					color: #FFFFFF;
					font-family: MiSans,MiSans;
					font-size: 30rpx;
					background-image:linear-gradient(0deg,#f43b47 0%, #453a94 100%);
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					z-index: 111;
				}
				.cover {
					width: 100%;
					height: 840rpx;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 40rpx;
					}
				}
				.swiper_item_content {
					
					.content_sn {
						font-size: 30rpx;
						color: #FFFFFF;
						font-family: MiSans,MiSans;
					}
					.abstract {
						font-size: 30rpx;
						color: #fbcda7;
						font-family: MiSans,MiSans;
						text-align: right;
						margin-top: 15rpx;
					}
				}
			}
		}
	}
}

  /* 轮播样机样式 start*/
  .card-swiper {
    height: 840rpx !important;
  }
  
  .card-swiper swiper-item {
    box-sizing: border-box;
    padding: 0rpx 5rpx 0rpx 5rpx;
    // overflow: initial;
  }
  
  .card-swiper swiper-item .swiper-item {
    display: block;
    transform: scale(0.9);
    transition: all 0.2s ease-in 0s;
    overflow: hidden;
  }
  .card-swiper swiper-item .swiper-item .swiper_item_content{
    position: absolute;
    left: 70%;
    transform: translateX(-50%);
    bottom: -180rpx;
    width: 540rpx;
    height: 180rpx;
    border-radius: 20rpx;
    background: rgba(0,0,0,.7);
    padding: 20rpx;
    transition: all 0.4s ease-in 0s;
    overflow: hidden;
	// z-index: -1;
  }
  .card-swiper swiper-item.cur .swiper-item .swiper_item_content{
	bottom: 30rpx;
	left: 50%;
    transition: all 0.4s ease-in 0s;
  }
  .card-swiper swiper-item.cur .swiper-item {
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
  }
  
 
</style>	
